<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="1200px">
    <el-row :gutter="20">
<!--      <el-col :span="12">-->
<!--        <el-card>-->
<!--          <div id="main" class="mod-home" style="width: 300px;height: 300px;"></div>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <el-card>-->
<!--          <div id="main1" class="mod-home" style="width: 500px;height: 300px;"></div>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <el-card>-->
<!--          <div id="main2" class="mod-home" style="width: 500px;height: 300px;"></div>-->
<!--        </el-card>-->
<!--      </el-col>-->
      <el-col :span="24">
        <el-card>
          <div id="main3" class="mod-home" style="width: 1200px;height: 600px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'weldingmachineinfo',
  data(){
    return {
      dataForm: {
        key: ''
      },
      datajson: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      Visiable: false,
      dialogVisible:false,
      chartLine: null
    }
  },
  mounted () {
    // this.testTwo();
    // await this.getDataList();
    // this.timer = setInterval(() => {
    //   setTimeout(this.testTwo, 0)
    // }, 10000)
    this.weldChart()
  },
  activated () {
    if (this.chartLine) {
      this.chartLine.resize()
    }
  },
  methods:{
    weldChart(){
      this.$http({
        url: this.$http.adornUrl('/equipinfo/equipinfotable/num'),
        method: 'get'
      }).then(({data}) => {
      var myChart1 = echarts.init(document.getElementById('main3'));
// 绘制图表
      myChart1.setOption({
        'title': {
          'text': '焊机数据'
        },
        'tooltip': {
          'trigger': 'axis'
        },
        'legend': {
          'data': [ '电压', '电流', '送丝速度' ]
        },
        'grid': {
          'left': '3%',
          'right': '4%',
          'bottom': '3%',
          'containLabel': true
        },
        'toolbox': {
          'feature': {
            'saveAsImage': { }
          }
        },
        'xAxis': {
          'type': 'category',
          'boundaryGap': false,
          'axisTick': {
            alignWithLabel: true
          },
          'data': [ '1', '2', '3', '4', '5', '6', '7' ]
        },
        // 'yAxis': {
        //   'type': 'value'
        // },
        'yAxis': [
          {
            type: 'value',
            name: '电流',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#5470c6'
              }
            },
            axisLabel: {
              formatter: '{value} m'
            }
          },
          {
            type: 'value',
            name: '电压',
            position: 'right',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#91CC75'
              }
            },
            axisLabel: {
              formatter: '{value} m'
            }
          },{
            type: 'value',
            name: '送气',
            position: 'right',
            offset: 30,
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#EE6666'
              }
            },
            axisLabel: {
              formatter: '{value} m'
            }
          }
        ],
        'series': [
          {
            'name': '电压',
            'type': 'line',
            'stack': '总量',
            'data': [ 120, 132, 101, 134, 90, 230, 210 ]
          },
          {
            'name': '电流',
            'type': 'line',
            'stack': '总量',
            'data': [ 220, 182, 191, 234, 290, 330, 310 ]
          },
          {
            'name': '送丝速度',
            'type': 'line',
            'stack': '总量',
            'data': [ 500, 520, 503, 516, 560, 543, 500 ]
          }
        ]
      });
      })
    },
    // 3.定义一个init函数，通过设置detailVisible值为true来让弹窗弹出，这个函数会在父组件的方法中被调用
    ini(cncname){
      this.dialogVisible = true;
      console.log('子组件matid为' + cncname)
    }
  }
}
</script>

<style scoped>

</style>
